{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
    <title>超级福中福</title>
    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/index.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/common.css' %}"/>
    <link rel="icon" href="{% static 'images/favicon.ico' %}"/>
</head>
<body>
<div class="page flex-col justify-between">
    <div id="notification" class="notification">
        <p id="message">这是一个通知提示信息！</p>
    </div>
    <div class="block_1 flex-col">
        <div class="box_1 {% if request.user.is_sales %}staff_height_box{% endif %} flex-col">
            <div class="group_6 flex-row justify-between">
                <span class="text_1">
                    {% if request.user.is_sales %}
                        抽奖码/兑换码
                    {% else %}
                        抽奖码
                    {% endif %}
                </span>
                <div class="image-text_4 flex-row justify-between" onclick="showDesc()">
                    <span class="text-group_1">使用说明</span>
                    <img class="thumbnail_1" src="{% static 'images/right_arrow.png' %}"/>
                </div>
            </div>
            <div class="box_redeem_input flex-row">
                <input type="text" class="redeem_input flex-col" maxlength="19" inputmode="alphanumeric">
                <div class="redeem_dash flex-col"></div>
                <input type="text" class="redeem_input flex-col" maxlength="4" inputmode="alphanumeric">
                <div class="redeem_dash flex-col"></div>
                <input type="text" class="redeem_input flex-col" maxlength="4" inputmode="alphanumeric">
                <div class="redeem_dash flex-col"></div>
                <input type="text" class="redeem_input flex-col" maxlength="4" inputmode="alphanumeric">
            </div>
            {% if user.is_authenticated %}
                <div onclick="redemption()" class="button_redeem flex-col">
                    <button class="text_6">
                    {% if request.user.is_sales %}
                        抽奖/兑换
                    {% else %}
                        立即抽奖
                    {% endif %}
                    </button>
                </div>
            {% else %}
                <div class="button_redeem button_disabled flex-col">
                    <button class="text_6">登录抽奖</button>
                </div>
            {% endif %}

        </div>
        <div class="box_series flex-col">
            <div class="box_series_header flex-row">
                <span class="box_series_title">系列活动</span>
            </div>
            <div class="box_prize_list">
                {% for item in series %}
                    <div class="box_prize flex-col">
                        <img class="prize_image" src="{{ item.logo_url }}" onclick="showPrizes({{ item.id }}, '{{ item.name }}')">
                        <span class="prize_title">{{ item.name }}</span>
                        <div class="prize_view flex-col">
                            <button class="text_review" onclick="showPrizes({{ item.id }}, '{{ item.name }}')">
                                查看奖品
                            </button>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="text-wrapper_18 flex-row">
                <span class="text_19">没有更多了~</span>
            </div>
        </div>
        <div class="overlay_description" id="desc_overlay">
            <div class="box_description">
                <div class="box_description_header flex-row">
                    <img
                            class="box_description_close"
                            referrerpolicy="no-referrer"
                            id="desc_close"
                            src="{% static 'images/close.png' %}"
                    />
                    <span class="box_description_title">使用说明</span>
                </div>
                <img class="box_description_line" src="{% static 'images/line.png' %}"/>
                <div class="box_description_content">
                    1.&nbsp;线下购买福赏系列产品可参与「超级福中福」专属活动，在线下商铺每购买一抽福赏可获得一个「超级福中福」兑换码。
                </div>
                <div class="box_description_content">
                    2.&nbsp;请输入「超级福中福」兑换码，每个兑换码仅可兑换一次，使用后将失效。兑换码有时效性，获得后请及时输入兑换。
                </div>
                <div class="box_description_content">
                    3.&nbsp;兑换成功的商品请前往「个人中心」查看。
                </div>
                <div class="box_description_content">
                    4.&nbsp;「超级福中福」的奖品为活动商品，不享受平台包邮规则，需自行支付邮费。
                </div>
            </div>
        </div>
        <div class="box_user flex-col">
            <div class="section_2 {% if user.is_sales %}staff_info{% endif %} flex-col">
                <div class="image-text_6 flex-row justify-between">
                    <div class="login_user_info flex-row">
                        <a href="/account/logout" title="登出">
                            <img class="label_2" referrerpolicy="no-referrer" src="{% static 'images/avatar.png' %}"/>
                        </a>
                        {% if user.is_authenticated %}
                            <span class="text-group_3">你好，{{ user.mobile }}</span>
                        {% else %}
                            <span class="text-group_3">登录查看抽奖记录</span>
                        {% endif %}
                    </div>
                    {% if user.is_authenticated %}
                    <div class="text-wrapper_15 flex-col">
                        <a class="text_20" href="{% url 'all_history' %}">抽奖记录</a>
                    </div>
                    {% else %}
                    <div class="text-wrapper_12 flex-col">
                        <a class="text_17" onclick="showLogin()">登录</a>
                        <div class="overlay_login" id="login_overlay">
                            <div class="box_description">
                                <div id="error-message" class="error-message" style="display: none;"></div>
                                <div class="box_description_header flex-row">
                                    <img class="box_description_close" id="login_close"
                                         src="{% static 'images/close.png' %}"/>
                                    <span class="box_description_title">登录/注册</span>
                                </div>
                                <form class="login-form" method="post" action="/account/login">
                                    {% csrf_token %}
                                    <img class="box_description_line" src="{% static 'images/line.png' %}"/>
                                    <div class="login_phone_group flex-row">
                                        <span class="region_code">+86</span>
                                        <input type="text" id="phone" class="text_input" name="mobile"
                                               placeholder="请输入手机号码" required>
                                    </div>
                                    <img class="login_form_line" src="{% static 'images/form_underline.png' %}"/>
                                    <div class="login_code_group flex-row">
                                        <input type="text" id="captcha" class="text_input captcha" name="captcha"
                                               placeholder="请输入验证码" maxlength="6" required>
                                        <span class="get_captcha" id="get-captcha">获取验证码</span>
                                    </div>
                                    <img class="login_form_line" src="{% static 'images/form_underline.png' %}"/>
                                    <button class="login_submit" type="submit" id="sign_in">登录/注册</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% if user.is_sales %}
                <a style="text-decoration: none;" href="{% url 'exchange_history' %}">
                    <div class="box_staff flex-row justify-between">
                        <span class="staff_info_text">分销兑换明细</span>
                        <div class="staff_cash_group flex-row justify-between">
                            <span class="staff_cash_text">待提现(元)：{{ pending_cash }}</span>
                            <img class="thumbnail_2" referrerpolicy="no-referrer" src="{% static 'images/right_arrow.png' %}"/>
                        </div>
                    </div>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
    <div id="overlay" class="overlay">
        <div class="box_description">
            <div class="box_description_header flex-row">
                <img class="box_description_close" id="close-btn" src="{% static 'images/close.png' %}"/>
                <span class="box_description_title" id="series-title">系列奖品</span>
            </div>
            <img class="box_description_line" src="{% static 'images/line.png' %}"/>
            <div class="prize-container">
                <div class="prize-list">
                    <!-- 奖品内容动态加载 -->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'javascript/home_index.js' %}"></script>
{% if user.is_authenticated == False %}
    <script src="{% static 'javascript/sign_in.js' %}"></script>
{% endif %}
</body>
</html>
